<%@ page import="com.lm56.web.security.SecUserDetails" %>
<%@ page import="org.springframework.security.core.context.SecurityContextHolder" %>
<%@ page import="com.lm56.web.sys.domain.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>

<head>
    <title>订单回收站</title>

    <%--<link href="../../../statics/bootstrap/css/bootstrap.min.css" rel="stylesheet" />--%>
    <%--<link href="../../../statics/styles/navbar.css" rel="stylesheet" />--%>
    <link href="${ctx}/statics/bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

</head>

<body>


<div class="container">
    <div div="row">

        <div class="row">

            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title">订单回收站</div>
                </div>
                <div class="panel-body">
                    <% SecUserDetails user = (SecUserDetails) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
                        if(user.getUserType() == User.USER_TYPE_COMPANY){
                    %>
                    <div class="row">
                        <div class="col-sm-offset-1 col-sm-10">

                            <form class="form-horizontal" role="form" method="post" action="">

                                <div class="col-sm-5">
                                    <input id="idQueryInput" type="text" class="form-control" name="queryStr" placeholder="手机号码或单号">
                                </div>

                                <div class="div-sm-5">
                                    <button id="idQueryButton" type="button" class="btn btn-warning"><span
                                            class="glyphicon glyphicon-search"></span>查询
                                    </button>

                                </div>

                            </form>

                        </div>
                    </div>
                    <%}%>

                </div>
            </div>

        </div>
        <div class="row" style="margin-bottom:10px">
            <div class="col-sm-5">
                <span>你的所有订单共3个，已选择1个</span>
                <button id="btnBatchDelete" type="button" class="btn btn-warning">永久删除</button>
                <button id="btnBatchRestore" type="button" class="btn btn-warning">还原</button>
            </div>

        </div>
        <div class="row">

            <!--线路列表-->
            <table id="table-waybills" class="table table-bordered table-hover" data-toggle="table">
                <thead>
                <tr>
                    <th></th>
                    <th>发货日期</th>
                    <th>单号</th>
                    <th>收货人</th>
                    <th>发货地</th>
                    <th>目的地</th>
                    <th>物流状态</th>
                    <th>详情</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
        <div class="row">
            <!--                    <span class="pull-right">第1-20条记录，共100条记录</span>-->
            <ul class="pagination pagination-sm pull-left">
                <li class="disabled"><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>

        </div>
    </div>

</div>
</div>


<!-- Large modal -->

<div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">地区选择</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="divRegionSelector"></div>
            </div>

        </div>
    </div>
</div>


<%--模态对话框--%>
<div id="myWaybillProcessModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">订单处理 <span class="my-modal-title-waybill-no"></span></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post">
                    <%--<div class="form-group">--%>
                    <%--<label class="control-label col-sm-4">处理:</label>--%>

                    <%--<div class="col-sm-7">--%>

                    <%--<select class="form-control" id="selectProcessType">--%>
                    <%--<option value="1" title="已揽件">已揽件</option>--%>
                    <%--<option value="2" title="已收货">已收货</option>--%>
                    <%--<option value="3" title="待处理">待处理</option>--%>
                    <%--<option value="4" title="已中转">已中转</option>--%>
                    <%--<option value="5" title="已签收">已签收</option>--%>
                    <%--</select>--%>
                    <%--</div>--%>

                    <%--</div>--%>


                    <div class="form-group  modal-transfer-info">
                        <label class="control-label col-sm-4">单号:</label>

                        <div class="col-sm-7">
                            <input name="processId" type="hidden">
                            <input name="waybillId" type="hidden">
                            <input name="waybillNo" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">操作日期:</label>
                        <div class="col-sm-7">
                            <input id="inputOperDate" name="sendDate" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group  modal-transfer-info">
                        <label class="control-label col-sm-4">公司名称:</label>

                        <div class="col-sm-7">
                            <%--<input name="companyId" type="hidden" value="0">--%>
                            <input name="companyName" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group  modal-transfer-info">
                        <label class="control-label col-sm-4">联系电话:</label>

                        <div class="col-sm-7">

                            <input name="phoneNo" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group  modal-transfer-info">
                        <label class="control-label col-sm-4">地址:</label>

                        <div class="col-sm-7">

                            <input name="address" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group  modal-transfer-info">
                        <label class="control-label col-sm-4">中转费用:</label>

                        <div class="col-sm-7">
                            <input name="fee" type="number"  class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label  col-sm-4">备注:</label>

                        <div class="col-sm-7">

                            <textarea name="remark" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-group">

                        <div class="col-sm-offset-3 col-sm-3">

                            <button type="submit" class="btn btn-warning">提交</button>
                        </div>
                        <div class="col-sm-3">

                            <button type="button" class="btn btn-default">取消</button>
                        </div>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>


<%--<script src="../../../statics/js/jquery-3.1.1.min.js"></script>--%>
<%--<script src="../../../statics/bootstrap/js/bootstrap.min.js"></script>--%>
<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/regionselector.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>

    $(function () {

        $("#waybills-tab").addClass("active");

        //============================================================================================
        //加载数据
        var loadWaybills = function(queryParams){
            if(queryParams == undefined){
                queryParams = {"params":{isRecycle:1}};
            }
            $.ajax({
                url: '${ctx}/workbench/1/waybills',
                type: 'post',
                contentType: 'application/json',
                dataType: 'json',
                data:JSON.stringify(queryParams),
                success: function (result, textStatus, jqXHR) {
                    console.log(result);
                    showWaybillTable(result.data);

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 通常 textStatus 和 errorThrown 之中
                    // 只有一个会包含信息
                    this; // 调用本次AJAX请求时传递的options参数
                }
            });
        }


        loadWaybills();

        function showWaybillTable(waybills) {

            var html = "";
            if (waybills.length == 0) {
                html = "<tr><td colspan='8' align='center'>没有数据....</td></tr>";
                $('#table-waybills tbody').html(html);
                return;
            }

            $.each(waybills, function (index, waybill) {
                        html += "<tr>"
                                + "    <td>"
                                + "        <div class='checkbox'>"
                                + "            <label>"
                                + "                <input class='list-checkbox' data-my-waybill-id='" + waybill.waybillId + "' type='checkbox'>"
                                + "            </label>"
                                + "        </div>"
                                + "    </td>"
                                + "    <td>" + waybill.sendDate + "</td>"
                                + "    <td>" + waybill.waybillNo + "</td>"
                                + "    <td>" + waybill.receiverName + "</td>"
                                + "    <td>" + waybill.startAddr + "</td>"
                                + "    <td>" + waybill.endAddr + "</td>"
                                + "    <td>" + getWaybillStatusText(waybill.waybillStatus) + "</td>"
                                + "    <td>"
                                + "        <div class='btn-group'>"
                                + "            <button type='button' class='btn btn-warning dropdown-toggle' data-toggle='dropdown'>"
                                + "                操作"
                                + "                <span class='caret'></span>"
                                + "            </button>"
                                + "            <ul class='dropdown-menu my-btn-waybill-process' role='menu'>"
                                + "                <li><a href='javascript:void(0)' data-my-process-id='1'"
                                + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                + "                       data-my-waybill-no='" + waybill.waybillNo + "'>还原</a></li>"
                                + "                <li><a href='javascript:void(0)' data-my-process-id='2'"
                                + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                + "                       data-my-waybill-no='" + waybill.waybillNo + "'>删除</a></li>"
                                + "            </ul>"
                                + "        </div>"
                                + "        <button class='btn btn-primary my-show-waybill-details' data-my-waybill-id='" + waybill.waybillId + "'>点击查看详情</button>"
                                + "    </td>"
                                + "</tr>";
                    }
            )
            ;


            $('#table-waybills tbody').html(html);
            addClickListener();


        }

        //加载数据结束====================================================================================================


        // 按钮监听========================================================================================================
        var addClickListener = function () {
            $('.my-btn-waybill-process a').click(function () {
                var waybillId = $(this).data("my-waybill-id");
                var waybillNo = $(this).data("my-waybill-no");
                var processId = $(this).data("my-process-id");
                console.log(processId);
                var waybillIds = new Array();
                waybillIds.push(waybillId);
                params={"params":waybillIds};
                if(processId==1){
                    recycleProcess('${ctx}/workbench/waybill/restore',params);
                }else if(processId==2){
                    recycleProcess('${ctx}/workbench/waybill/delete',params);
                }



            });

            $('.my-show-waybill-details').click(function(){
                var waybillId = $(this).data('my-waybill-id');
                window.location="${ctx}/workbench/1/waybill/details?requestSrc=recycling&waybillId="+waybillId;
            });
        }





        //-----------------------------------------------------------------------------


        //批量删除
        $('#btnBatchDelete').click(function(){
            var waybillIds = new Array();
            $('#table-waybills input[type="checkbox"][class="list-checkbox"]:checked').each(function(index,item){
                var waybillId = $(this).data("my-waybill-id");
                console.log(waybillId)
                waybillIds.push(waybillId);

            })

            var params={"params":waybillIds}
            recycleProcess('${ctx}/workbench/waybill/delete',params);

        });



        //批量恢复
        $('#btnBatchRestore').click(function(){
            var waybillIds = new Array();
            $('#table-waybills input[type="checkbox"][class="list-checkbox"]:checked').each(function(index,item){
                var waybillId = $(this).data("my-waybill-id");
                console.log(waybillId)
                waybillIds.push(waybillId);

            });

            var params={"params":waybillIds}
            recycleProcess('${ctx}/workbench/waybill/restore',params);


        });

        var recycleProcess = function(url,json){
            $.ajax({
                url: url,
                type: 'post',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(json),
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    loadWaybills();

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 通常 textStatus 和 errorThrown 之中
                    // 只有一个会包含信息
                    console.log("错误：" + textStatus);
                    this; // 调用本次AJAX请求时传递的options参数
                }
            });


        }





        //查询按钮
        $('#idQueryButton').click(function(){
            var queryStr = $.trim($('#idQueryIntput').val());
            var queryParams = {params:{}};
            if(queryStr !== ""){
                queryParams["queryStr"] = queryStr;
            }
            loadWaybills(queryParams);

        });



        //-----------------------------------------------------------------------------
        //日期选择器
        $("#inputOperDate").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language: 'zh-CN'

        });
        //地图选择器
        var myRegionSelector = regionselector.init('divRegionSelector');
        myRegionSelector.click(function (param) {
            alert(param.value);

        });


        //始发地选择
        $('#btnStartLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputStartLocation').val(param.text);
                $('#inputStartLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });

        //终点地选择
        $('#btnEndLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputEndLocation').val(param.text);
                $('#inputEndLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });

        //-------------------------------
        //获取状态文本
        var getWaybillStatusText = function(status){
            switch(status){
                case 0:
                    return "新增";
                case 1:
                    return "已揽件";
                case 2:
                    return "已收货";
                case 3:
                    return "待处理";
                case 4:
                    return "已中转";
                case 5:
                    return "已签收";
                default :
                    return "未知";
            }
        }

    })
</script>
</body>

</html>